<template>
  <div class="main">
    <div class="carousel" style="margin-bottom: 20px">
      <div style="
                  position: absolute;
                  top:100px;
                  right: 10%;
                  z-index: 2;
                  ">
        <el-card shadow="hover">
          <div class="user_avatar">
            <el-avatar icon="el-icon-user-solid" :src="avatar_src"></el-avatar>
          </div>
          <div style="margin-top: 20px">
            <div style="margin-bottom: 10px">
              <div v-if="hasLogin">
                <div style="margin-bottom: 10px;">您好，{{ userInfo.name }}</div>
                <div style="margin-bottom: 10px;">
                  <el-button type="primary" @click="goIntoSystem">
                    进入系统
                  </el-button>
                </div>
                <div>
                  <el-button type="primary" @click="logout">
                    登出
                  </el-button>
                </div>

              </div>
              <el-button type="primary" @click="loginDisplay=true" v-else>
                校内外师生登录
              </el-button>

            </div>

            <div style="margin-bottom: 10px">
              <el-button type="primary" @click="regDisplay=true" v-if="!hasLogin">
                校外访客注册
              </el-button>
            </div>
          </div>
        </el-card>
      </div>
      <el-carousel height="550px" style="z-index: 1">
        <el-carousel-item style="background-color: gray">

          <a href="http://www.zju.edu.cn/">
            <img class="carousel_img"
                 src="../../static/image/浙大.jpg"/>
          </a>
          class="carousel_img">
        </el-carousel-item>
        <el-carousel-item style="background-color: gray">
          <a href="https://ieeexplore.ieee.org/Xplore/home.jsp">
            <img src="../../static/image/ieee.jpg" class="carousel_img">
          </a>
        </el-carousel-item>
        <el-carousel-item style="background-color: gray">
          <a href="http://course.zju.edu.cn/">
            <img src="../../static/image/学在浙大.jpg"
                 class="carousel_img">
          </a>
        </el-carousel-item>

        <!--        <el-carousel-item style="background-color: gray">-->
        <!--          <img src="https://img-blog.csdnimg.cn/20201205131823295.png" class="carousel_img">-->
        <!--        </el-carousel-item>-->
      </el-carousel>


    </div>

<!--    <div>-->
<!--      <el-button @click="test4" style="float: right;">-->
<!--        变学生-->
<!--      </el-button>-->
<!--      <el-button @click="test3" style="float: right;">-->
<!--        变测试-->
<!--      </el-button>-->
<!--      <el-button @click="test2" style="float: right;">-->
<!--        查信息-->
<!--      </el-button>-->
<!--      <el-button @click="test1" style="float: right;">-->
<!--        通用测试-->
<!--      </el-button>-->
<!--    </div>-->
    <div class="course" style="height: 2000px; padding: 20px;">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="推荐课程" name="1">
          <rec-course></rec-course>
        </el-tab-pane>
        <el-tab-pane label="新课速递" name="2">
          <new-course></new-course>
        </el-tab-pane>
        <el-tab-pane label="师生论坛" name="4">正在开发中，敬请期待</el-tab-pane>
        <el-tab-pane label="最新通知" name="5">正在开发中，敬请期待</el-tab-pane>

      </el-tabs>


    </div>
    <div class="dialogs_class">
      <el-dialog
        title="校外访客注册"
        :visible.sync="regDisplay"
        :close-on-click-modal="false"
        width="50%"

      >
        <div>
          <el-form ref="regForm" :model="regForm" :rules="regRules"
          >
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="regForm.email"
              ></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="regForm.userName" placeholder="2-15位中英文或数字"></el-input>
            </el-form-item>
            <el-form-item label="输入密码" prop="password">
              <el-input type="password" v-model="regForm.password" placeholder="6-20位英文或数字"></el-input>
            </el-form-item>
            <el-form-item label="再次输入密码" prop="passwordAgain">
              <el-input type="password" v-model="regForm.passwordAgain" placeholder="6-20位英文或数字"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-button type="primary" @click="regSubmit('regForm')" sty>确定</el-button>
        <el-button @click="formReset('regForm')">取消</el-button>

      </el-dialog>
      <el-dialog
        title="用户登录"
        :visible.sync="loginDisplay"
        :close-on-click-modal="false"
        width="500px"
      >
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules"
        >
          <el-form-item label="输入登录邮箱" prop="email">
            <el-input v-model="loginForm.email"
            ></el-input>
          </el-form-item>

          <el-form-item label="输入密码" prop="password">
            <el-input type="password" v-model="loginForm.password" placeholder="6-20位英文或数字"></el-input>
          </el-form-item>

        </el-form>
        <el-button type="primary" @click="loginSubmit('loginForm')">登录</el-button>
        <el-button @click="formReset('loginForm')">取消</el-button>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import axios from 'axios'
import qs from 'qs'
import state from '../store/index'
import NewCourse from "./Main/newCourse";
import RecCourse from "./Main/recCourse";

export default {
  components: {RecCourse, NewCourse},

  computed: {
    loginRules() {
      return {
        email: this.regRules.email,
        password: this.regRules.password
      }
    },

    hasLogin() {
      return state.getters.hasLogin
    },
    userInfo() {
      return state.getters.userInfo
    }
  },
  data: function () {
    return {
      courseList: [],


      activeName: '1',
      avatar_src: "",

      regDisplay: false,
      regForm: {
        email: "",
        password: "",
        userName: "",
        passwordAgain: "",
        userType: 1,
      },


      regRules: {
        email: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const reg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+(\.([a-zA-Z]{2,4}))+$/;
              if (reg.test(value) && value.length < 254) {
                // callback()
                callback()
              } else {
                callback(new Error("请输入正确格式的邮箱"))
              }

            }, message: '请输入正确的邮箱', trigger: 'blur'
          }
        ],
        password: [
          {
            required: true, validator: (rule, value, callback) => {
              const reg = /^[0-9a-zA-Z.]{6,20}$/;
              if (reg.test(value)) {
                callback()
              } else {
                callback(new Error("请输入正确格式的密码"))
              }
              callback()
            }, message: '请输入正确的密码', trigger: 'blur'
          }
        ],
        passwordAgain: [
          {
            required: true, validator: (rule, value, callback) => {
              const reg = /^[0-9a-zA-Z.]{6,20}$/;
              if (reg.test(value) && value === this.regForm.password) {
                callback()
              } else {
                callback(new Error("请输入相同的密码"))
              }
            }, message: "请输入相同的密码", trigger: 'blur'
          }
        ],
        userName: [
          {
            required: true, validator: (rule, value, callback) => {
              const reg = /^[0-9a-zA-Z\u4e00-\u9fa5]{2,15}$/;
              if (reg.test(value)) {
                callback()
              } else {
                callback(new Error("请输入正确的用户名"))
              }
            }, message: '请输入正确的用户名', trigger: 'blur'
          }
        ],

      },

      loginDisplay: false,
      loginForm: {
        email: "",
        password: "",
      },


    }

  },
  methods: {
    handleClick() {
      console.log('asd')
    },

    resolveRole(roleNum) {
      switch (roleNum) {
        case 0:
          return 'test'
        case 1:
          return 'guest'
        case 2:
          return 'student'
        case 3:
          return 'ta'
        case 4:
          return 'admin'
        case 5:
          return 'teacher'
      }
    },

    regSubmit(formName) {

      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post('/api/register', qs.stringify(this.regForm)).then(res => {
            console.log(res)
            this.$message.success("注册成功")
          }).catch(err => {
            this.$message.error("注册失败，请检查您的输入信息")
            console.log(err)
          })
          this.formReset(formName)
        } else {
          this.$message.error("注册失败，请检查您的输入信息")
          return false;
        }
      })
    },

    loginSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          axios.post('/api/login', qs.stringify(this.loginForm))
            .then(res1 => {

              console.log(res1)
              if (res1.data.state) {
                state.commit('login', {
                  email: this.loginForm.email,
                  id: res1.data.id,
                  role: this.resolveRole(res1.data.userType),
                  name: res1.data['userName'],
                  authorizeToken: res1.data["authorizeToken"],
                })
                this.$message.success(res1.data['message'])
                this.formReset(formName)
                this.loginDisplay = false;
              } else {

                this.loginForm.password=''
                this.$message.error(res1.data['message'])
              }
            })

        } else {
          this.$message.error("请选择合理的输入格式")
          return false
        }
      })
    },

    logout() {
      state.commit('logout')
    },

    formReset(formName) {
      this.$refs[formName].resetFields();
      this.regDisplay = false;
      this.loginDisplay = false;
    },


    goIntoSystem() {
      let role = this.userInfo.role
      console.log(role)
      switch (role) {
        case 'teacher':
          this.$router.push('/Teacher')
          break
        case 'student':
          this.$router.push('/Student')
          break
        case 'admin':
          this.$router.push('/Admin')
          break
        case 'guest':
          this.$router.push('/Guest')
          break
        case 'ta':
          this.$router.push('/TA')
          break
      }
    },

    test1() {
      axios.post('/api/getAllCourses').then(res => {
        console.log(res)
      })
    },
    test2() {
      console.log(this.userInfo)

    },
    test3() {
      state.commit('setRole', 'test')
    },
    test4() {
      state.commit('setRole', 'student')
    }


  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  text-align: center;
}

.carousel_img {
  height: 100%;
  width: 100%;
}


</style>
